<template>
   <div> 
       <div class="title">周边游玩</div>
       <ul>
           <li class="item border-bottom" v-for="item of list" :key="item.id">
               <div class="item-img-wrapper">
                   <img class="item-img" :src="item.imgUrl"/>
                </div>
               <div class="item-info">
                   <p class="item-title">{{item.title}}</p>
                   <p class="item-desc">{{item.desc}}</p>
               </div>
           </li>
       </ul>
   </div>
</template>
<script>
export default {
    name: 'HomeWeekend',
    props: {
        list: Array
    },
    // data () {
    //     return {
    //         recommendList: [{
    //         id: '0001',
    //         imgUrl: 'http://img1.qunarzz.com/sight/source/1507/9f/f8dde5c968f8ac.jpg_r_640x214_83194a9b.jpg',
    //         title: '大连圣亚海洋世界',
    //         desc: '浪漫大连，大连圣亚海洋世界'
    //     },{
    //         id: '0002',
    //         imgUrl: 'http://img1.qunarzz.com/sight/source/1507/9f/f8dde5c968f8ac.jpg_r_640x214_83194a9b.jpg',
    //         title: '大连圣亚海洋世界',
    //         desc: '浪漫大连，大连圣亚海洋世界'
    //     },{
    //         id: '0003',
    //         imgUrl: 'http://img1.qunarzz.com/sight/source/1507/9f/f8dde5c968f8ac.jpg_r_640x214_83194a9b.jpg',
    //         title: '大连圣亚海洋世界',
    //         desc: '浪漫大连，大连圣亚海洋世界'
    //     },{
    //         id: '0004',
    //         imgUrl: 'http://img1.qunarzz.com/sight/source/1507/9f/f8dde5c968f8ac.jpg_r_640x214_83194a9b.jpg',
    //         title: '大连圣亚海洋世界',
    //         desc: '浪漫大连，大连圣亚海洋世界'
    //     }]
    //     }
    // }
}
</script>
<style lang="stylus" scoped>
 @import '~styles/mixins.styl';
    .title{
      margin-top : .2rem
      line-height : .8rem
      background : #eeeeee
      text-indent : .2rem }
        .item-img-wrapper{
          overflow : hidden
          height: 0
          padding-bottom: 37.09%}
         .item-img{
         width: 100%}
        .item-info{
          padding : .1rem}        
         .item-title{
           line-height : .54rem
           font-size : .32rem
           ellipsis()}
         .item-desc{
           line-height : .4rem
           color : #cccccc
           ellipsis()}
         
        
</style>


